<template>
  <el-container class="diandanallpage">
    <el-header class="diandanheader">

      <!--四个框-->
      <el-row class="diandanrow-box">
        <div style="width: 60%">
          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('00')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
<!--              <img src="~@/assets/icons/imageicon/1.png" style="margin-top:8px;height: 28px">-->

              <div style="margin-top:4px; margin-bottom: 6px">过夜费</div>
            </div>
          </el-button>

          <el-button type="success" plain @click.prevent.stop.native="projectCategory('04')" style="width: 60px;height: 60px;color: green;border: none;padding:0px 0px">
            <div>
<!--              <img src="~@/assets/icons/imageicon/2.png" style="margin-top:8px;height: 28px">-->
              <div style="margin-top:4px; margin-bottom: 6px">软饮</div>
            </div>
          </el-button>

          <el-button type="warning" plain @click.prevent.stop.native="projectCategory('05')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
<!--              <img src="~@/assets/icons/imageicon/8.png" style="margin-top:8px;height: 28px">-->
              <div style="margin-top:4px; margin-bottom: 6px">香烟</div>
            </div>
          </el-button>

          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('06')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
<!--              <img src="~@/assets/icons/imageicon/4.png" style="margin-top:8px;height: 28px">-->
              <div style="margin-top:4px; margin-bottom: 6px">酒水</div>
            </div>
          </el-button>

          <el-button type="success" plain @click.prevent.stop.native="projectCategory('07')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
<!--              <img src="~@/assets/icons/imageicon/7.png" style="margin-top:8px;height: 28px">-->
              <div style="margin-top:4px; margin-bottom: 6px">茶水</div>
            </div>
          </el-button>

          <el-button type="warning" plain @click.prevent.stop.native="projectCategory('08')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
<!--              <img src="~@/assets/icons/imageicon/11.png" style="margin-top:8px;height: 28px">-->
              <div style="margin-top:4px; margin-bottom: 6px">食品</div>
            </div>
          </el-button>
          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('22')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
              <!--              <img src="~@/assets/icons/imageicon/11.png" style="margin-top:8px;height: 28px">-->
              <div style="margin-top:4px; margin-bottom: 6px">其他</div>
            </div>
          </el-button>
          <el-button type="primary" plain @click.prevent.stop.native="projectCategory('01')" style="width: 60px;height: 60px;border: none;padding:0px 0px">
            <div>
              <!--              <img src="~@/assets/icons/imageicon/11.png" style="margin-top:8px;height: 28px">-->
              <div style="margin-top:4px; margin-bottom: 6px">门票</div>
            </div>
          </el-button>

        </div>

        <!--输入框、按钮-->
        <div class="diandanprian">
          <el-form ref="form" label-width="100px">
            <div style="display: inline-block">
              <el-form-item label="手牌号：">
                <el-input v-model="barform.handBrand" placeholder=" " style="width:100px"></el-input>
              </el-form-item>
            </div>

<!--            <div style="display: inline-block">
              <el-form-item label="吧台号：">
                <el-input v-model="barform.barNumber" placeholder=" " style="width:100px"></el-input>
              </el-form-item>
            </div>-->

            <div class="diandananniu">
              <el-button class="dupn" type="primary" @click="chagnehandbrand">读 牌</el-button>
              <el-button class="dupn" type="success" @click="xiadan">下 单</el-button>
              <el-button class="dupn" type="warning" @click="cancel">清 空</el-button>
              <el-button class="dupn" type="" @click="back" style="margin-left: 160px">返 回</el-button>
            </div>
          </el-form>
        </div>
      </el-row>
    </el-header>

    <el-container class="diandancontainer">
<!--      <el-aside>-->
        <div class="diandantextout">
          <div class="diandantext1" v-loading="loading">
            <!--           <div class="row" v-for="rows in branchData">
                               <div class="card" v-for="cols in rows">
                                   <div class="name">{{cols.name}}</div>
                              </div>
                       </div>-->

            <el-row class="diandanbutton-list1" v-for="rows in branchData">

              <el-col v-for="cols in rows" :span="4">
<!--                <el-button plain
                           style="height: 80px;width: 120px;border: #1e1e1e solid 1px;color: purple;margin-left: 6px; margin-top: 10px;padding: 0;"
                           class="button1" @click="diandan(cols)" v-show="flag==='00'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}</div>
                </el-button>-->
                <el-button type="primary" plain style="height: 80px;width: 120px;margin-left: 6px;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='00'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>
                <el-button type="success" plain style="height: 80px;color: green;width: 120px;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='04'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>
                <el-button type="warning" plain
                           style="height: 80px;width: 120px; color: darkorange;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='05'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>
                <el-button type="primary" plain style="height: 80px;width: 120px;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='06'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>
                <el-button type="success" plain style="height: 80px;color: green;width: 120px;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='07'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>
                <el-button type="warning" plain
                           style="height: 80px;width: 120px; color: darkorange;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='08'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>
                <el-button type="primary" plain style="height: 80px;width: 120px;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='22'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>
                <el-button type="primary" plain style="height: 80px;width: 120px;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='01'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}元</div>
                </el-button>

<!--                <el-button type="" plain
                           style="height: 80px;width: 120px; color: dimgrey;border: #1e1e1e solid 1px;margin-top: 10px;padding: 0;"
                          class="button5" @click="diandan(cols)" v-show="flag==='06'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}</div>
                </el-button>
                <el-button type="warning" plain
                           style="height: 80px;width: 120px; color: darkorange;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='07'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}</div>
                </el-button>
                <el-button type="danger" plain
                           style="height: 80px;width: 120px; color: brown;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='08'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}</div>
                </el-button>
                <el-button type="success" plain
                           style="height: 80px;width: 120px; color: green;margin-top: 10px;padding: 0;"
                           @click="diandan(cols)" v-show="flag==='22'">
                  <div>{{ cols.projectCode }}</div>
                  <div>{{ cols.entryName }}</div>
                  <div>{{ cols.unitPrice }}</div>
                </el-button>-->

              </el-col>
            </el-row>
            <!--空行，占位用，勿删-->
            <div style="height: 10px"></div>
          </div>
          <!--        <div class="text2">
                    <div class="text4">
                    <input
                      :value="input"
                      class="input"
                      @input="onInputChange"
                      placeholder="请输入商品名称"
                    ></div>
                    <div class="text3">
                      <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input"/>
                    </div>

                  </div>-->

        </div>
<!--      </el-aside>-->

      <el-container class="diandanrightbox">
        <el-main class="whdmain" style="height: 730px">
          <div>
<!--            <span style="margin-bottom: 1px">录单员工 : </span>
            <span>2009-张吉花</span>
            <el-divider class="divide"></el-divider>-->
          </div>

          <el-table
            empty-text = "玉泉宫"
            class="diandanlisttable"
            :data="tableData"
            height="90.4%"
            border
            style="width: 100%; overflow-y: auto"
            >
            <el-table-column type="index" label="序号" min-width="10%" align="center">
            </el-table-column>
            <el-table-column prop="projectCode" label="商品编号" min-width="20%" align="center">
            </el-table-column>
            <el-table-column prop="entryName" label="商品名称"  min-width="15%" align="center">
            </el-table-column>
            <el-table-column prop="unitPrice" sortable label="单价" min-width="15%" align="center">
              <template slot-scope="scope">
                <el-button v-if="scope.row.entryName=='破损'||scope.row.entryName=='客赔'||scope.row.entryName=='临时品项'||scope.row.entryName=='清洗费'||scope.row.entryName=='服务费'||scope.row.entryName=='欠帐'" style="height:37px;width: 74px ;font-size: 14px "  @click="handleClick(scope.$index)" type="primary" plain size="mini">{{scope.row.unitPrice}}</el-button>
                <div v-if="scope.row.entryName!='破损'&&scope.row.entryName!='客赔'&&scope.row.entryName!='临时品项'&&scope.row.entryName!='清洗费'&&scope.row.entryName!='服务费'&&scope.row.entryName!='欠帐'" align="center">{{scope.row.unitPrice}}</div>
                <!--                  <span v-if="scope.row.consumptionStatus==0" class="status">正常</span>
                                  <span v-if="scope.row.consumptionStatus==1" class="status1">退单</span>-->
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" min-width="10%" align="center">
            </el-table-column>

<!--            <el-table-column prop="mnemonicCode" sortable label="助记码" align="center">
            </el-table-column>-->
            <el-table-column prop="totalAmount" sortable label="金额" min-width="15%"  align="center">

            </el-table-column>
            <el-table-column  key="slot" label="操作" min-width="15%"  align="center">
              <template  #default="scope">
                <el-button type="primary" plain @click="jianshao(scope.$index)">减少</el-button>
              </template>
<!--              <template slot-scope="scope">
                <el-button type="primary"  plain @click="jianshao(scope.index)">减少</el-button>
              </template>-->
            </el-table-column>
          </el-table>
          <div style="background: #F8F8F9;width: 100%;height: 44px">
            <el-row>
              <el-col :span="6" ><div style="margin-top: 12px;margin-left: 140px">商品数量：</div></el-col>
              <el-col :span="6"><div style="margin-top: 12px;margin-right: 140px">{{ quantity }}个</div></el-col>
              <el-col :span="6"><div style="margin-top: 12px;margin-left: 140px">合计金额：</div></el-col>
              <el-col :span="6"><div style="margin-top: 12px;margin-right: 140px">{{ amount }}元</div></el-col>
            </el-row>
          </div>
          <!--          <div class="paint" style="margin-top: 10px;text-align: center">
                      <div>
                        <span style="margin-bottom: 1px;font-size: 25px">热卖商品</span>
                        <el-divider class="divide"></el-divider>
                      </div>
                      <img src="~@/assets/icons/imageicon/1111.png" style="height: 288px;margin-top: 0px">
                    </div>-->
          <!--合计行（头）-->
<!--          <el-table sticky-header border style="width: 100% ;margin-top: -1px;">
            <el-table-column label="合计" width="100" align="center"></el-table-column>
            <el-table-column label="" width="120" align="center"></el-table-column>
            <el-table-column label="" width="200" align="center"></el-table-column>
            <el-table-column label="" width="120" align="center"></el-table-column>
            <el-table-column :label="quantity" width="120" align="center"></el-table-column>

            <el-table-column :label="amount" width="120" align="center"></el-table-column>
            <el-table-column label="" width="189" align="center"></el-table-column>
          </el-table>-->
            <!--              <el-table-column label="" width="140" align="center"></el-table-column>
                          <el-table-column label="" width="140" align="center"></el-table-column>
                          <el-table-column label="" width="180" align="center"></el-table-column>-->


            <!--              <el-table-column label="" align="center"></el-table-column>-->


          <!--覆盖层，重要（大概），忽删-->
<!--          <div style="background-color: white;z-index: 99;margin-top: -60px"/>-->

        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
// import "./App.css";
import {listProject, gethands, addProject,updateProject,infolist } from "@/api/module/whd/diandan";
import log from "@/views/monitor/job/log";
import {updatehandDetails} from "@/api/module/cjl/details";

export default {
  name: "App",
  components: {},
  data() {
    return {
      // 查询参数
      querydetailsParams: {
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      proform: {
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      barform: {
        handBrand: "",
        barNumber: null
      },
      // 合计
      amount: 0, // 总价格
      quantity: 0, // 总数量
      loading: false,
      flag: 0,
      goodsList: [],
      branchData: [],
      input: "",
      tableData: []
    }
  },
  created() {
    const handBrand = this.$route.query.handBrand;
    console.log("参数："+handBrand);

    if(handBrand!==null&&handBrand!==""){
      this.barform.handBrand=handBrand.toString();
    }else{
      this.$modal.msgError("手牌号不可为空");
    }
    this.queryParams.projectCategory="00";
    this.queryParams.firstLevelClassification="01";
    this.flag = "00";
    this.getList();

  },
  mounted() {
    this.getRow();
  },
  methods: {
    updateTime() {
      console.log("随便玩玩")
    },
    handleClick(index) {
      const entryName = index;
      console.log(index)
      this.$prompt('请修改金额', '系统信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        /*inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'*/
      }).then(({ value }) => {
        this.tableData[index].unitPrice=value;
        this.tableData[index].totalAmount=this.tableData[index].unitPrice*this.tableData[index].quantity
        this.quantity=0;
        this.amount=0;
        for (let i = 0; i < this.tableData.length; i++) {
          console.log(this.tableData.length)
          this.quantity +=parseInt(this.tableData[i].quantity)
          this.amount +=parseInt(this.tableData[i].totalAmount)

        }
        /*this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });*/
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        });
      });

      // 处理 entryName ...
    },
    //返回方法
    back(){
      this.$router.push({path: '/batai/bartai'});
    },

    /** 商品分类 */
    projectCategory(category) {
      if(category==="00"){
        this.queryParams.firstLevelClassification="01";
      }else{
        this.queryParams.firstLevelClassification=null;
      }
      console.log(category);
      this.queryParams.projectCategory = category;
      this.flag = category;
      console.log(category);
      this.getList();
    },
    /** 输入手牌 */
    chagnehandbrand() {
      this.tableData = [];
      this.proform.handBrand = this.barform.handBrand;
      if(!this.barform.handBrand.includes(" ")){
        if (this.barform.handBrand !== null && this.barform.handBrand !=="") {
          gethands(this.barform.handBrand).then(response=>{
            this.querydetailsParams.handBrand = this.barform.handBrand;
          })
        }
        else{
          this.$modal.msgError("手牌号为空,请输入手牌号");
        }
      }else{
        this.$modal.msgError("手牌号中包含空格");
      }

    },
cancel(){
      this.tableData=[];
      this.quantity=0;
      this.amount=0;
},
    /** 查询项目信息列表 */
    getList() {
      this.loading = true;
      listProject(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.getRow();
        this.loading = false;
      });
    },
    /** 查询消费详细列表 */
   /* getDetailsList() {
      listDetails(this.querydetailsParams).then(response => {
        this.tableData = response.rows;
      });
    },*/
    /** 点单操作 */
    diandan(project) {
      console.log("点单"+this.barform.handBrand)
      console.log(this.barform.handBrand==="")
      console.log(typeof (this.barform.handBrand))
      if(this.barform.handBrand.toString()===""){
      this.$modal.msgError("手牌号不能为空");
      }else{
        gethands(this.barform.handBrand).then(response =>{
          if(this.tableData.length===0){
            this.tableData.push({
              handBrand:this.barform.handBrand,
              projectCode:project.projectCode,
              entryName:project.entryName,
              quantity:1,
              unitPrice:project.unitPrice,
              mnemonicCode:project.mnemonicCode,
              totalAmount:project.unitPrice,
            })
            this.quantity=0;
            this.amount=0;
            for (let i = 0; i < this.tableData.length; i++) {
              console.log(this.tableData.length)
              this.quantity +=parseInt(this.tableData[i].quantity)
              this.amount +=parseInt(this.tableData[i].totalAmount)

            }
          }else{
            for(let i = 0; i < this.tableData.length; i++){
              if(this.tableData[i].entryName === project.entryName){
                this.tableData[i].quantity= parseFloat(this.tableData[i].quantity)+1
                this.tableData[i].totalAmount=this.tableData[i].quantity*project.unitPrice
                break
              }
              else{
                if(i===this.tableData.length-1){
                  this.tableData.push({
                    handBrand:this.barform.handBrand,
                    projectCode:project.projectCode,
                    entryName:project.entryName,
                    quantity:1,
                    unitPrice:project.unitPrice,
                    mnemonicCode:project.mnemonicCode,
                    totalAmount:project.unitPrice,
                  })
                  i++
                }

              }
            }
            this.quantity=0;
            this.amount=0;
            for (let i = 0; i < this.tableData.length; i++) {
              console.log(this.tableData.length)
              this.quantity +=parseInt(this.tableData[i].quantity)
              this.amount +=parseInt(this.tableData[i].totalAmount)

            }

          }
        });

      }


    },
    //减少商品数量
    jianshao(index){
      console.log("111")
      console.log(this.tableData[index])
      this.tableData[index].quantity-=1;
      this.tableData[index].totalAmount=this.tableData[index].unitPrice*this.tableData[index].quantity
      if(this.tableData[index].quantity==0){
        this.tableData.splice(index,1);
      }
      this.quantity=0;
      this.amount=0;
      for (let i = 0; i < this.tableData.length; i++) {
        console.log(this.tableData.length)
        this.quantity +=parseInt(this.tableData[i].quantity)
        this.amount +=parseInt(this.tableData[i].totalAmount)

      }
    },
    xiadan(){
      if(this.tableData.length>0){
        this.$modal.confirm('是否确认下单？').then(function () {
        }).then(() => {
          this.barform.totalAmount=this.amount;
          updateProject(this.barform).then(response => {

          });
          for(var i=0;i<this.tableData.length;i++){
            addProject(this.tableData[i]).then(response => {
            });
          }
          this.$modal.msgSuccess("点单成功");
          //重置已点商品表单
          this.barform.totalAmount="";
          this.tableData=[];
          this.quantity=0;
          this.amount=0;
          //重置手牌表单
          this.barform.handBrand="";
        });

        /*for(var i=0;i<this.tableData.length;i++){
        addProject(this.tableData[i]).then(response => {
        });
        }
        this.$modal.msgSuccess("点单成功");
        //重置已点商品表单
        this.tableData=[];
        //重置手牌表单
        this.barform=[];*/
      }else{
        this.$modal.msgError("未选择商品");
      }

    },
    getRow() {
      let arr = [];
      let row = Math.ceil(this.goodsList.length / 6);
      //  行循环
      for (let i = 0; i < row; i++) {
        //  第i行的商品
        arr[i] = [];
        // modLast：最后一行的商品个数
        let modLast = this.goodsList.length % 6 === 0 ? 6 : this.goodsList.length % 6;
        // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
        let lastRow = i === (row - 1) ? modLast : 6;
        //  列循环
        for (let j = 0; j < lastRow; j++) {
          arr[i][j] = this.goodsList[6 * i + j];
        }
      }

      //  最后得到arr数组，将数组赋值给一个变量
      this.branchData = arr;
    },
    //指定列求和
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      //第一列命名合计
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        console.log(column.property)

        //指定allCompanyNum、allCarNum、allDriverNum不求和，其余列军求和
        if (column.property !== 'visitorId' && column.property !== 'tableNumber' && column.property !== 'entryName' && column.property !== 'projectCategory'
          && column.property !== 'projectCode' && column.property !== 'mnemonicCode' && column.property !== 'unit'
          && column.property !== 'unitPrice') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = ''
        }
      });
      let jine=sums[sums.length-1];
      sums[sums.length-1]=Math.round(jine*100)/100
      return sums
    },
    onChange(input) {
      this.input = input;
    },
    onKeyPress(button) {
      console.log("button", button);
    },
    onInputChange(input) {
      this.input = input.target.value;
    }

  }
}
</script>

<style lang="scss" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.diandancontainer{
  margin-top: 20px;
}
.diandanheader{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 5px;
  background-color: #FFFFFF;
}
/*.input {
  !*margin-top: 5px;*!
  margin-left: 10px;
  margin-right: 5px;
  width: 533px;
  height: 30px;
  padding: 10px;
  font-size: 18px;
  text-align: center;
  border-radius: 4px;
  border-color: #FFFFFF;
  !*box-sizing: border-box;*!
  border-width: 1px;
}*/
.el-aside {
  background-color: #E9EEF3;
  min-width: 55%;
  margin-left: 10px;
  margin-right: 5px;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: inherit;
}
.whdmain{
  overflow-y: hidden;
  height: 730px;
  background-color: #FFFFFF;
  color: #333;
  width: 100%;
  margin-right: 5px;
  margin-top: 10px;
  margin-left: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: inherit;
}

.el-aside, .el-main {
  height: 765px;
  margin-bottom: 0px;
}
.diandantext2 {
  height: 230px;
  width: 552px;
  border-radius: 4px;
  margin-bottom: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: inherit;
}

.text3 {
  height: 155px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 4px;
  position: inherit;

}

.iconstyle {
  margin-top: 5px;
}

.position-fixed {
  position: inherit;
  margin-bottom: 5px;
  margin-top: 10px;
}
.divide {
  margin-top: 4px;
  margin-bottom: 10px;
}
.button-list2 {
  margin-top: 5px;
  text-align: center;
  margin-bottom: 5px;

}
.diandanallpage {
  /*position: fixed;*/
  margin-left: 5px;
  margin-right: 10px;
  height: 840px;
}

.diandanrow-box {
  display: flex;
  filex-wrap: wrap;
}

.diandanprian {
  margin-top: 12px;
  margin-bottom: 12px;
}

.diandananniu {
  margin-left: 40px;
  display: inline-block;
  position: relative;
}

.diandantext1 {
  margin-top: 10px;
  height: 730px;
  padding-right: 2%;
  width: 830px;
  border-radius: 4px;
  margin-bottom: 5px;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.diandanrightbox {

  width: 100px;
}



.diandanlisttable {
  margin-top: 42px;
  overflow-y: auto;
  overflow-x: hidden;
  position: inherit;
  border: #DFE6EC 1px solid;
}



.diandanbutton-list1 {
  text-align: center;
}

.button1 {
  background-color: #ebd4ef;
  border: #9c26b0;
}
.button5 {
  background-color: darksalmon;
  border: #9c26b0;
}
//不影响全局，使用样式穿透
::v-deep .el-table__body-wrapper {
  // 整个滚动条
  &::-webkit-scrollbar {
    width: 0px; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  // 滚动条轨道
  &::-webkit-scrollbar-track {
    border: none;
  }
}
// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .diandanlisttable th.gutter {
  display: none;
  width: 0
}
::v-deep .diandanlisttable colgroup col[name='gutter'] {
  display: none;
  width: 0;
}
// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
  width: 100% !important;
}
::-webkit-scrollbar{
  width: 0px !important;
  height: 0px !important;
  border: none;
}
::-webkit-scrollbar-track{
  width: 0!important;height: 0;
  border: none;
}

/*::-webkit-scrollbar {
  width: 0 !important;
  !*height: 0;*!
}*/

</style>

